<template>
  <div>
    <List :loadapi="loadapi" :filterapi="filterapi" >
      <template v-slot:searchBar="slotProps">
        <SearchBar :keyword="slotProps.condition" :placeholder="slotProps.placeholder" :viewoptionArr="slotProps.viewoptionArr" @handleClickViewOption="slotProps.handleClickViewOption" @hanldeClickFilter="slotProps.hanldeClickFilter" @handleClickSearch="slotProps.handleClickSearch" @handleInputSearch="slotProps.handleInputSearch"></SearchBar>
      </template>
        <template v-slot:listItem="slotProps">
          <div class="L-box">
            <ContactItem  idobject="contact" :item="slotProps.itemData"></ContactItem>
          </div>
        </template>
    </List>
  </div>
</template>

<script setup lang="ts" name="contact">

import List from "@/components/common/List.vue"
import ContactItem from "@/components/base/Contact/ContactItem.vue"
import SearchBar from "@/components/common/SearchBar.vue"
import {ref} from "vue"


const loadapi = `contact.list.do`
const filterapi =  `contact.query.do`
</script>

<style>

.L-avatar-box {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #409eff;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}


</style>